﻿<div class="layui-card" id="lg-ApplyFormAdd" style="height:100%">
    <div class="lg-diy-wrap">
        <div class="lg-diy-head layui-card-header">
            <div><i class="fa fa-home fa-fw"></i>表单设计</div>
            <div class="lg-diy-tools"><span class="lg-btn lg-btn-warm" v-on:click="back()">返回</span><span class="lg-btn lg-btn-normal" v-on:click="save()">保存</span></div>
        </div>
        <div class="lg-diy-body">
            <div class="lg-diy-left">
                <div class="lg-field-group">
                    <span class="title">填表项选择</span>
                    <div class="lg-field-group-box">
                        <template v-if="baseItems.length>0">
                            <div :class="['field field-block',{'selected':selected(item)}]" v-for="item in baseItems" v-on:click="select(item)">
                                <i class="fa"></i>
                                <span class="text">{{item.Data.Title}}</span>
                                <span class="fa fa-check"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div class="lg-diy-center lg-form">
                <div class="lg-form-background">
                    <div class="lg-form-content">
                        <div class="lg-form-head">
                            <div class="lg-form-head-title">
                                <input class="lg-input" placeholder="表单标题" v-model="form.Title">
                            </div>
                            <div class="lg-form-head-intro">
                                <textarea class="lg-textarea" placeholder="添加描述" v-model="form.Intro"></textarea>
                            </div>
                        </div>
                        <div class="lg-form-body">
                            <draggable :list="form.Items" handle=".lg-form-drag" ghost-class="ghost" :force-fallback="true" chosen-class="choseClass" animation="300" delay="2" item-key="1">
                                <template #item="{ element }">
                                    <div :class="['lg-form-box',{'act':curr&&element.Data.Name==curr.Data.Name},{'lg-form-box-no-render':!element.Data.IsRender}]" v-on:click="curr=element" accesskey="element.Data.Name" :style="{'width':element.Data.Width}">
                                        <div class="lg-form-panel"><i class="fa fa-trash-o fa-fw" v-on:click="unSelect(element)"></i></div>
                                        <div class="lg-form-drag"></div>
                                        <div class="lg-no-render" v-if="!element.Data.IsRender"><i class="fa fa-eye-slash fa-fw"></i></div>
                                        <component :is="GetComponent(element.TypeName)"
                                                   :data="element.Data"
                                                   :items="form.Items"
                                                   v-model:value="element.Data.Value">
                                        </component>
                                    </div>
                                </template>
                            </draggable>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg-diy-right">

                <lg-form-setting :data="curr.Data" :type-name="curr.TypeName" :items="form.Items" base="true" v-if="curr"></lg-form-setting>
            </div>
        </div>
    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js';
    import { freeFormBase } from '/plugins/lgform/lg.form.base.js';
    freeForm.addEventListener();
    frame.createPage({
        mounted: function () {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        baseItems: [],
                        curr: null,
                        form: {
                            Title: "",
                            Intro: "",
                            Items: []
                        }
                    }
                },
                mounted: function () {
                    this.GetBaseForm();
                },
                computed: {
                    CurrItem: function () {
                        var arr = this.form.Items.filter(p => p.Data.Name == this.curr)
                        if (arr.length > 0) {
                            return arr[0].Data
                        } else {
                            return null;
                        }
                    }
                },
                methods: {
                    Icon: function (typeName) {
                        return diyForm.icons[typeName]
                    },
                    GetBaseForm: function () {
                        lg.request({
                            url: "/api/sys/apply/GetBaseForm",
                            success: res => {
                                if (res.code == 0) {
                                    this.baseItems = freeForm.toJson(res.data.Items, []);
                                }
                            }
                        })
                    },
                    GetComponent: function (key) {
                         return freeForm.types[key].component.name;
                    },
                    selected: function (item) {
                        var arr = this.form.Items.filter(p => p.Data.Name == item.Data.Name);
                        return arr.length > 0;
                    },
                    select: function (item) {
                        var arr = this.form.Items.filter(p => p.Data.Name == item.Data.Name);
                        if (arr.length == 0) {
                            this.form.Items.push(lg.obj.copy(item));
                            this.curr = this.form.Items[this.form.Items.length - 1]
                        } else {
                            layer.msg("该项已启用，不可重复添加！", { icon: 2 })
                        }

                    },
                    unSelect: function (item) {
                        var that = this;
                        layer.confirm("是否确认移除项[" + item.Data.Title + "]?", function (box) {
                            layer.close(box);
                            that.form.Items = that.form.Items.filter(p => p.Data.Name != item.Data.Name);
                            that.curr = that.form.Items[that.form.Items.length - 1]
                        })
                    },
                    save: function () {
                        var data = lg.obj.copy(this.form);
                        freeForm.process(data);
                        data.Items = freeForm.toString(data.Items);
                        lg.request({
                            url: "/api/sys/apply/AddForm",
                            method: "post",
                            data: data,
                            success: res => {
                                if (res.code == 0) {
                                    layer.msg("提交成功！", { icon: 1 });
                                    this.back();
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    back: function () {
                        frame.Back(page.url, res => {
                            res.laytable.reload();
                        })
                    }
                }
            })
            freeForm.regComponent(app);
            freeFormBase.regComponent(app);
            app.component('draggable', window.vuedraggable)
            app.mount("#lg-ApplyFormAdd");
        }
    }).mount();
</script>
<style>
    .choseClass {
        background: #f9f9f9;
        color: #625b5b;
        opacity: 0.5;
        height: auto;
        border: none
    }

        .choseClass:after {
            content: '', clear:both
        }

    .ghost {
        height: 0px;
        overflow: hidden;
        border: 2px solid #f00
    }
</style>